<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=750,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<title>购买密码锁</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/buyLock.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background: #f3f3f3;">
		<div class="wrapper">
			<div class="column">
				<div class="label">锁型</div>
				<div class="right-cont"></div>
			</div>
			<div class="column">
				<div class="label">单价</div>
				<div class="right-cont">
					<div><span>10</span>元/把</div>
				</div>
			</div>
			<div class="column">
				<div class="label">数量选择</div>
				<div class="right-cont">
					<a href="javascript:void(0);" id="minus_btn"></a>
					<input type="tel" id="text_box" value="1"/>
					<a href="javascript:void(0);" id="add_btn"></a>
				</div>
			</div>
			<div class="column" style="text-align: right;">
				应付：<div class="total">￥<span>9.00</span></div>
			</div>
		</div>
		
		<script type="text/javascript">
			//按钮加
			$("#add_btn").click(function(){
        		var num = $('#text_box').val();
        		num++;
        		$('#text_box').val(num);
		 	});
		 	//按钮减
			$("#minus_btn").click(function(){
        		var num = $('#text_box').val();
        		if( num > 1 ){
					num -= 1;
        			$('#text_box').val(num);
        		}
			});
			//数量编辑
        	$('#text_box').bind('input propertychange',function(){
				if(!isNaN($(this).val()) && $(this).val() != '' ){
            		var num = $(this).val();
				}else{
					$(this).val('1');
				}
			});
		</script>
	</body>
</html>
